<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta content="App Inventor para Android" name="description">
    <meta content="Android, Blocks App Inventor, Mobile, Phone, IDE" name="keywords">
    <title>
      Text Group 2 - App Inventor para Android
    </title> 
    <link href="../../../static/images/appinventor-16.png" rel="SHORTCUT ICON" type="image/ico">
    <link href="../../../static/images/appinventor-16.png" rel="icon" type="image/png">
    <link href="../../../static/css/appinventor.css" rel="stylesheet" type="text/css">
<!-- ADD Google Analytics here -->
<!-- END Google Analytics here -->
    <style type="text/css">
img.c3 {border-width:0}
    h2.c2 {font-weight: bold}
    div.c1 {clear:both;}
    </style>
  </head>
  <body>
    <div id="aiac">
      <div class="main-container">
        <div class="header">
          <div class="header-title">
            <a href="../../../about/index.html"><img alt="" src="../../../static/images/appinventor_logo.gif"></a>
          </div>
            <div class="header-search">
<!-- ADD Google Custom Search -->
<!-- END Google Custom Search -->
              <div class="header-search-query">
              </div>
              <div class="header-search-button">
              </div>
            </div>
          <div class="header-login">
            <div class="header-login-greeting">
              Aprende acerca de App Inventor
            </div>
          </div>
        </div>
        <div class="customhr customhr-green"></div>
<!-- ADD Google Search Results -->
<div id="cse" style="width:100%;height:0;"></div>
<!-- END Google Search Results -->
        <div id="navigation">
          <div id="navigation-links">
            <div class="navigation-link-option" id="navigation-link-home">
              <a href="../../../about/index.html">Acerca de</a>
            </div>
            <div class="navigation-link-option navigation-link-active" id="navigation-link-learn">
              <a href="../../../learn/index.html">Aprende</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-forum">
              <a href="../../../forum/index.html">Foro</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-myappinventor">
              <a href="">Mis Proyectos</a><div>(próximamente)</div>
            </div>
          </div>
          <div id="navigation-breadcrumb">
            <a href="../../../learn/index.html">Aprende</a> &gt; <a href="../../../learn/tutorials/index.html">Tutoriales</a> &gt; Text Group 2 &gt;
          </div>
          <div class="c1"></div>
        </div>
        <div class="customhr customhr-gray"></div>
        <div class="content">
          <div class="content-body">
            <div class="learn-page">
              <h1>
                Text Group Parte II: Añadiendo y quitando miembros
              </h1>
              <div class="imagecontainer">
                <img align="right" alt="" src="TextGroup2Assets/textGroup2emulator.png">
              </div>
              <p>
                Este tutorial extiende el <a href="../../../learn/tutorials/textgroup/textgroup.html">tutorial Text Group.</a> La aplicación enviaba un mensaje de texto a una lista fija de números de teléfono, y solo el programador podia cambiar los números de la lista. La aplicación en este tutorial permite al usuario añadir y quitar números de teléfono de la lista, y almacena la lista de modo permanente en una base de datos.<br>
              </p>
              <h2>
                Primeros pasos
              </h2>
              <p>
                Conéctate al sitio web de App Inventor y abre tu proyecto textgroup (si no has completado ese tutorial, hazlo ahora antes de continuar). Haz clic en SaveAs (guardar como) y nómbrala "TextGroup2". Puedes dejar el <span class="ButtonText">Titulo</span> de la pantalla como "Text Group". Abre el editor de bloques y conéctalo al teléfono.
              </p>
              <h2>
                Introducción
              </h2>
              <p>
                Diseñaras la aplicación para que el usuario añada números de teléfono al grupo eligiéndolos de la lista de contactos del teléfono, y pueda quitarlos eligiendo elementos que ya estén en el grupo. Almacenaras la lista de números en una base de datos para que estén disponibles incluso después de cerrar la aplicación y reiniciarla.
              </p>
              <p>
                El tutorial cubre los siguientes componentes y conceptos de App Inventor:<br>
              </p>
              <ul>
                <li>El bloque <span class="ButtonText">foreach</span> para repetir operaciones en una lista.
                </li>
                <li>El componente <span class="ButtonText">PhoneNumberPicker</span> para acceder a los contactos del teléfono.
                </li>
                <li>El componente <span class="ButtonText">ListPicker</span> para permitir al usuario elegir un número de la lista para quitarlo.
                </li>
                <li>El componente <span class="ButtonText">Texting</span> para enviar mensajes de texto.
                </li>
                <li>El componente base de datos <span class="ButtonText">TinyDB</span> para almacenar la lista de números de teléfono en una base de datos.<br>
                </li>
              </ul>
              <h2>
                Prepara los componentes <br>
              </h2>
              <p>
                La interfaz de usuario para Text Group, Parte II tiene una caja de texto, un botón, y una etiqueta de estado para el envío del mensaje al grupo, al igual que en la Parte I. Si has elegido SaveAs para iniciar este proyecto, estos componentes deben de estar ya en la pantalla. Si es así, debes entonces añadir un componente <span class="ButtonText">PhoneNumberPicker</span> y un componente <span class="ButtonText">ListPicker</span> para añadir y quitar números de teléfono de la lista, junto con un componente <span class="ButtonText">Texting</span> y un componente <span class="ButtonText">TinyDB</span>, los cuales aparecerán en el área "non-visual components" (componentes no visibles). Mas abajo hay una tabla con instrucciones detalladas para el diseño de los componentes, pero puedes también construirla a partir la la siguiente imagen de como deberían quedar:
              </p>
              <div class="imagecontainer">
                <img alt="" src="TextGroup2Assets/designerPart2.png" width="963">
              </div>
              <p>
                Los componentes que se muestran a continuación son los usados para crear la pantalla del diseñador mostrada mas arriba. Los cuatro primeros eran parte del proyecto  TextGroup por lo que ya deberían estar en la pantalla del diseñador si haz hecho clic en SaveAs (guardar como) para iniciar este. Necesitarás arrastrar cada uno de los otros componentes desde la <span class="ButtonText">Paleta</span> al <span class="ButtonText">Visor</span> y nombrarlos como se especifica a continuación:
              </p>
              <div class="advtutorial">
                <table>
                  <tbody>
                    <tr>
                      <td class="tbl-header">
                        Tipo de componente
                      </td>
                      <td class="tbl-header">
                        Grupo de la paleta
                      </td>
                      <td class="tbl-header">
                        Como lo llamarás
                      </td>
                      <td class="tbl-header">
                        Propósito del componente
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">TextBox</span>
                      </td>
                      <td>                        
                        Basic                      
                      </td>
                      <td>
                        <span class="ButtonText">MessageText</span>
                      </td>
                      <td>
                        El usuario introducirá el mensaje aquí.
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">Button</span>
                      </td>
                      <td>                        
                        Basic                      
                      </td>
                      <td>
                        <span class="ButtonText">TextGroupButton</span>
                      </td>
                      <td>
                        Se enviará el mensaje haciendo clic aquí
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">Label</span>
                      </td>
                      <td>                        
                        Basic                      
                      </td>
                      <td>
                        <span class="ButtonText">StatusLabel</span>
                      </td>
                      <td>
                        Informa cuando el mensaje ha sido enviado.
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">Texting</span>
                      </td>
                      <td>                        
                        Social                      
                      </td>
                      <td>
                        <span class="ButtonText">Texting1</span>
                      </td>
                      <td>
                        El componente que envía el mensaje.
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">Label</span>
                      </td>
                      <td>                        
                        Basic                      
                      </td>
                      <td>
                        <span class="ButtonText">GroupHeadingLabel</span>
                      </td>
                      <td>
                        Encabezado para la lista de números de teléfono que aparecerán
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">Label</span>
                      </td>
                      <td>                        
                        Basic                      
                      </td>
                      <td>
                        <span class="ButtonText">MembersLabel</span>
                      </td>
                      <td>
                        Aquí es donde aparecerá la lista de números de teléfono
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">Horizontal Arrangement</span>
                      </td>
                      <td>                        
                        Screen Arrangement                      
                      </td>
                      <td>
                        <span class="ButtonText">Horizontal Arrangement1</span>
                      </td>
                      <td>
                        Para organizar horizontalmente los botones (pickers) para añadir y quitar
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">PhoneNumberPicker</span>
                      </td>
                      <td>                        
                        Social                      
                      </td>
                      <td>
                        <span class="ButtonText">PhoneNumberPicker1</span>
                      </td>
                      <td>
                        Permite al usuario elegir números de la lista de contactos
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">ListPicker</span>
                      </td>
                      <td>                        
                        Basic                      
                      </td>
                      <td>
                        <span class="ButtonText">RemoveListPicker</span>
                      </td>
                      <td>
                        Permite al usuario quitar un número de los números de teléfono del grupo
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">TinyDB</span>
                      </td>
                      <td>                        
                        Basic                      
                      </td>
                      <td>
                        <span class="ButtonText">TinyDB1</span>
                      </td>
                      <td>
                        Para almacenar y recuperar los números de teléfono del grupo desde una base de datos
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>
                Ajusta las propiedades de los componentes del siguiente modo:
              </p>
              <ul>
                <li>Ajusta <span class="ButtonText">Hint</span> (sugerencia) de <span class="ButtonText">MessageText</span> a "enter a message" (introduce un mensaje)
                </li>
                <li>Ajusta <span class="ButtonText">Text</span> de <span class="ButtonText">TextGroupButton</span> a "Text Group"
                </li>
                <li>Cambia la propiedad <span class="ButtonText">Text</span> de <span class="ButtonText">StatusLabel</span> a "status".
                </li>
                <li>Ajusta <span class="ButtonText">Text</span> de <span class="ButtonText">GroupHeadingLabel</span> a "-- Group -- ".
                </li>
                <li>Ajusta <span class="ButtonText">Text</span> de <span class="ButtonText">MembersLabel</span> a "members will appear here" (los miembros aparecerán aquí).
                </li>
                <li>Ajusta <span class="ButtonText">Text</span> de <span class="ButtonText">PhoneNumberPicker1</span> a "Add Member"(añadir miembro).
                </li>
                <li>Cambia <span class="ButtonText">Text</span> de <span class="ButtonText">RemoverListPicker</span> a "Remove Member" (quitar miembro)
                </li>
              </ul>
              <h2>
                Añade comportamientos a los componentes<br>
              </h2>
              <p>
                Si has completado Text Group, Parte I, debes tener la siguiente lista definida en el editor de bloques:
              </p>
              <div class="imagecontainer">
                <img alt="" src="../textgroup/TextGroupAssets/phonelist.png">
              </div>
              <p>
                Para esta aplicación, todavía necesitarás la lista pero no con números pre-definidos en ella -- los números serán añadidos por el usuario de la aplicación. Por tanto quita los bloques de de texto con los números y deja el bloque <span class="ButtonText">make a list</span> vacío:
              </p>
              <div class="imagecontainer">
                <img alt="" src="TextGroup2Assets/emptylist.png">
              </div>
              <p>
                Necesitarás añadir los siguientes comportamientos:
              </p>
              <p>
                1. Cuando el usuario hace clic en el botón "Add Member" (el botón añadir miembro asociado con el selector <span class="ButtonText">PhoneNumberPicker</span>), el selector aparecerá para que el usuario elija un número. Cuando la selección esté hecha, la aplicación añadirá el número elegido a la lista <span class="ButtonText">PhoneNumbers</span> y actualizará la base de datos.
              </p>
              <p>
                2. Cuando el usuario hace clic en el botón "Remove Member" (el botón quitar miembro asociado al selector <span class="ButtonText">RemovListPicker</span>), el selector aparecerá para que el usuario elija uno de los números existentes en <span class="ButtonText">PhoneNumbers</span>. Cuando la selección esté hecha, la aplicación quitará el número de la lista y actualizará la base de datos.
              </p>
              <p>
                3. Cuando la aplicación se inicia, los números almacenados en la base de datos se recuperan y se cargan en <span class="ButtonText">PhoneNumbers</span>.<br>
              </p>
              <h2>
                <strong>Añadiendo un</strong> Número de teléfono (miembro) al grupo<br>
              </h2>
              <p>
                La lista de números de teléfono en la lista de contactos aparecerá cuando el usuario haga clic en botón asociado a <span class="ButtonText">PhoneNumberPicker</span>: ese comportamiento está incluido en el componente. Cuando el usuario hace una selección de la lista de contactos, el evento <span class="ButtonText">AfterPicking</span> de <span class="ButtonText">PhoneNumberPicker</span> se inicia-- tu trabajo es programar este evento para añadir el elemento seleccionado a la lista y actualizar la base de datos.<br>
              </p>
              <p>
                Necesitarás los siguientes bloques:<br>
              </p>
              <div class="advtutorial">
                <table>
                  <tbody>
                    <tr>
                      <td class="tbl-header">
                        Tipo de bloque
                      </td>
                      <td class="tbl-header">
                        Cajón
                      </td>
                      <td class="tbl-header">
                        Propósito
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">PhoneNumberPicker1.AfterPicking</span>
                      </td>
                      <td>                        
                        PhoneNumberPicker1                      
                      </td>
                      <td>
                        el controlador de evento que es iniciado cuando el usuario elige de la lista de contactos
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">add items to list</span>
                      </td>
                      <td>                        
                        Lists<br>
                      </td>
                      <td>
                        tu objetivo es añadir el número elegido a la lista<br>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">global PhoneNumbers</span>
                      </td>
                      <td>                        
                        My Definitions                      
                      </td>
                      <td>
                        coloca este en la ranura list de add items to list
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">PhoneNumberPicker1.PhoneNumber</span><br>
                      </td>
                      <td>                        
                        PhoneNumberPicker1                      
                      </td>
                      <td>
                        esto mantiene el número de teléfono elegido, colócalo en la ranura <span class="ButtonText">item</span> de <span class="ButtonText">add items to list</span> (añadir elemento a la lista)
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">TinyDB1.StoreValue</span>
                      </td>
                      <td>                        
                        TinyDB1                      
                      </td>
                      <td>
                        después de actualizar la lista, necesitas actualizar la base de datos.
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">text</span> ("textGroup")                      
                      </td>
                      <td>                        
                        Text<br>
                      </td>
                      <td>
                        colócalo en la ranura tag de <span class="ButtonText">StoreValue</span>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">global PhoneNumbers</span>
                      </td>
                      <td>                        
                        My Definitions                      
                      </td>
                      <td>
                        coloca este en la ranura value (valor) de <span class="ButtonText">StoreValue</span>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">set MembersLabel.Text to</span>
                      </td>
                      <td>                        
                        MembersLabel                      
                      </td>
                      <td>
                        muestra la lista en el teléfono
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">global PhoneNumbers</span>
                      </td>
                      <td>                        
                        My Definitions                      
                      </td>
                      <td>
                        <span class="ButtonText">colócalo en set MembersLabel.Text to</span>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>
                Los bloques deben quedar así:
              </p>
              <div class="imagecontainer">
                <img alt="" height="270" src="TextGroup2Assets/addMember.png" width="459">
              </div>
              <h2>
                Como trabajan los bloques
              </h2>
              <p>
                Cuando el usuario hace una elección desde <span class="ButtonText">PhoneListPicker,</span> el evento <span class="ButtonText">PhoneListPicker1.AfterPicking</span> se inicia. Uno de los trabajos de <span class="ButtonText">PhoneListPicker'</span> es colocar la elección del usuario en su propiedad <span class="ButtonText">PhoneNumber</span>, por lo que el controlador de evento llama a <span class="ButtonText">add items to list</span> (añadir elementos a la lista) para colocar la elección en la lista <span class="ButtonText">PhoneNumbers</span>.
              </p>
              <p>
                <span class="ButtonText">PhoneNumbers</span> es una variable, y las variables son memorias de corta duración que desaparecen cuando se cierra la aplicación. Es por esto que, después de añadir el elemento a la variable, se usa el bloque <span class="ButtonText">TinyDB1.StoreValue</span> para copiar esa lista a la base de datos -- la memoria de larga duración del teléfono. Los datos se etiquetan como "textGroup". Mas tarde, usarás esa etiqueta para recargar la lista de números de teléfono desde la base de datos cada vez que se inicie la aplicación.
              </p>
              <p>
                Después de actualizar la base de datos, se llama a <span class="ButtonText">set MembersLabel.Text to</span> para mostrar la lista. Esto es necesario porque las variable de lista están ocultas para el usuario hasta que se colocan en un elemento visible. Colocar directamente la lista en una etiqueta es un método rudimentario de mostrarla -- la lista aparecerá con la forma (111-1111 222-2222). En la siguiente sección, programarás un modo mas elegante de mostrar la lista.
              </p>
              <blockquote class="testing">
                <strong>Prueba el comportamiento.</strong> En el teléfono haz clic en "Add Member" y elige un número de la lista de contactos que aparece. ¿Aparece el número en MembersLabel? Prueba a añadir algunos números mas para ver como se muestra la lista.<br>
              </blockquote>
              <h2 class="c2">
                Mostrando la lista con los elementos en lineas separadas
              </h2>
              <p>
                En este momento la aplicación muestra al usuario los números de teléfono que se han añadido, pero no de un modo muy elegante. Crea un procedimiento <span class="ButtonText">displayMembers</span>, el cual muestre la lista con cada teléfono en una linea separada. Asegúrate y llama al procedimiento en el evento <span class="ButtonText">PhonePicker1.AfterPicking</span>,  event, después del bloque <span class="ButtonText">add items to list</span>, para mostrar la lista actualizada. La llamada al procedimiento debe sustituir a los bloques que colocan MembersLabel.Text directamente en la lista. Para obtener ayuda para mostrar la lista e lineas separadas, mira <a href="../../../learn/reference/other/displaylist.html">Displaying a List</a>
              </p>
              <p>
                Necesitarás los siguientes bloques:
              </p>
              <div class="advtutorial">
                <table>
                  <tbody>
                    <tr>
                      <td class="tbl-header">
                        Tipo de bloque
                      </td>
                      <td class="tbl-header">
                        Cajón
                      </td>
                      <td class="tbl-header">
                        Propósito
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">procedure</span> ("displayMembers")                      
                      </td>
                      <td>                        
                        Definitions                      
                      </td>
                      <td>
                        crea un procedimiento para que puedas llamarlo desde múltiples lugares
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">set MembersLabel.Text to</span>
                      </td>
                      <td>                        
                        MembersLabel                      
                      </td>
                      <td>
                        Muestra la lista aquí
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">text</span> ("")                      
                      </td>
                      <td>                        
                        Text                      
                      </td>
                      <td>
                        comienza con un texto vacío
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">foreach</span>
                      </td>
                      <td>                        
                        Control                      
                      </td>
                      <td>
                        Se repite para los números
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">name number</span>
                      </td>
                      <td>                        
                        in the foreach                      
                      </td>
                      <td>
                        nombra la variable foreach "number'. Es el elemento actual de <span class="ButtonText">foreach</span>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">global PhoneNumbers</span>
                      </td>
                      <td>                        
                        My Definitions                      
                      </td>
                      <td>
                        Se coloca en la ranura <span class="ButtonText">in list</span> de <span class="ButtonText">foreach</span>
                      </td>
                    </tr>
                    <tr>
                      <td height="30">
                        <span class="ButtonText">set MembersLabel.Text to</span>
                      </td>
                      <td>                        
                        MembersLabel                      
                      </td>
                      <td>
                        Se modifica con cada uno de los números
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">make text</span>
                      </td>
                      <td>                        
                        Text                      
                      </td>
                      <td>
                        Crea un objeto de texto desde varias piezas
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">MembersLabel.Text</span>
                      </td>
                      <td>                        
                        MembersLabel                      
                      </td>
                      <td>
                        Se añade a la etiqueta en cada repetición de <span class="ButtonText">foreach</span>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">text</span> ("\n")                      
                      </td>
                      <td>                        
                        Text                      
                      </td>
                      <td>
                        El caracter de nueva linea, para que el siguiente número aparezca en una nueva linea
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">value number</span>
                      </td>
                      <td>                        
                        My Definitions                      
                      </td>
                      <td>
                        El número actual de la lista
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>
                Así es como deben quedar los bloques:
              </p>
              <div class="imagecontainer">
                <img alt="" src="TextGroup2Assets/displayMembers.png">
              </div>
              <h2>
                Como trabajan los bloques
              </h2>
              <p>
                El bloque <span class="ButtonText">foreach</span> en <span class="ButtonText">displayMembers</span> sucesivamente añade un número de teléfono al final de la etiqueta, colocando un carácter nueva linea entre cada elemento.
              </p>
              <p>
                Por supuesto ente procedimiento no hará nada hasta que tu lo llames: debes añadir una llamada al procedimiento en el evento <span class="ButtonText">PhonePicker1.AfterPicking</span>, por debajo del bloque <span class="ButtonText">add items to list</span>. El bloque <span class="ButtonText">call displayMembers</span> puedes  encontrarlo en el cajón My Definitions, y debe sustituir a los bloques que ponen directamente a <span class="ButtonText">MembersLabel.Text</span> en la lista.
              </p>
              <blockquote class="testing">
                <strong>Prueba este comportamiento.</strong> En el teléfono haz clic en "Add Member" para elegir otro número que añadir a la lista.  Cuando se muestra la lista modificada, ¿Aparecen los números en lineas separadas?<br>
              </blockquote>
              <h2>
                Quitando un número de la lista
              </h2>
              <p>
                Para permitir al usuario quitar un número de la lista, debes primero tener la lista <span class="ButtonText">PhoneNumbers</span> en el selector <span class="ButtonText">RemoveListPicker</span> que aparece cuando el usuario hace clic en "Remove Member". A diferencia del componente <span class="ButtonText">PhonePicker</span>, el cual toma los datos de lalista de contactos del teléfono, <span class="ButtonText">ListPicker</span> requiere explícitamente que tu cargues los elementos que aparecerán. Puedes hacer esto cambiando la propiedad <span class="ButtonText">Elements</span> del componente <span class="ButtonText">ListPicker</span>. Harás esto dentro del evento <span class="ButtonText">RemoveListPicker.BeforePicking</span>, el cual es iniciado justo cuando el usuario hace clic en el botón pero antes de mostrar la lista.
              </p>
              <p>
                Los bloques deben quedar así:
              </p>
              <div class="imagecontainer">
                <img alt="" height="105" src="TextGroup2Assets/BeforePicking.png" width="430">
              </div>
              <p>
                A continuación, crea el evento <span class="ButtonText">RemoveListPicker.AfterPicking</span> para que la selección del usuario sea quitada de la lista <span class="ButtonText">PhoneNumbers</span>. Necesitarás los siguientes bloques:
              </p>
              <div class="advtutorial">
                <table>
                  <tbody>
                    <tr>
                      <td class="tbl-header">
                        Tipo de bloque
                      </td>
                      <td class="tbl-header">
                        Cajón
                      </td>
                      <td class="tbl-header">
                        Propósito
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">RemoveListPicker.AfterPicking</span>
                      </td>
                      <td>                        
                        RemoveListPicker                      
                      </td>
                      <td>
                        este se inicia después de que el usuario elija un número de la lista
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">remove list item</span>
                      </td>
                      <td>                        
                        Lists                      
                      </td>
                      <td>
                        quita el elemento indicado de una lista dada
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">global PhoneNumbers</span>
                      </td>
                      <td>                        
                        My Definitions                      
                      </td>
                      <td>
                        colócalo en la ranura list de <span class="ButtonText">remove list item</span>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">position in list</span>
                      </td>
                      <td>                        
                        Lists                      
                      </td>
                      <td>
                        dado un elemento en una lista, este te indica su indice (su posición en la lista)
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">RemoveListPicker.Selection</span>
                      </td>
                      <td>                        
                        RemoveListPicker                      
                      </td>
                      <td>
                        el número elegido por el usuario, colócalo en la ranura thing de <span class="ButtonText">position in list</span>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">global PhoneNumbers</span>
                      </td>
                      <td>                        
                        My Definitions                      
                      </td>
                      <td>
                        colócalo en la ranura <span class="ButtonText">list</span> de <span class="ButtonText">position in list</span>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">call displayMembers</span>
                      </td>
                      <td>                        
                        My Definitions                      
                      </td>
                      <td>
                        una vez que el usuario quita un elemento, muestra la lista modificada
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>
                Los bloques deben quedar así:
              </p>
              <div class="imagecontainer">
                <img alt="" height="267" src="TextGroup2Assets/RemoveAfterPicking.png" width="584">
              </div>
              <h2>
                Como trabajan los bloques
              </h2>
              <p>
                Cuando el usuario elige un número de <span class="ButtonText">RemoveListPicker</span>, el evento <span class="ButtonText">AfterPicking</span> es iniciado. El controlador de evento usa <span class="ButtonText">position in list</span> para obtener la posición en la lista del número elegido, entonces usa esa posición para quitar el número de la lista <span class="ButtonText">PhoneNumbers</span>. La base de datos es actualizada y la lista mostrada.
              </p>
              <blockquote class="testing">
                <strong>Prueba el comportamiento.</strong> En el teléfono haz clic en "Remove Member" y elige un número de la lista que aparece. Cuando la lista vuelve a aparecer, ¿Se ha quitado el número elegido?<br>
              </blockquote>
              <h2>
                Cargando la lista desde la base de datos
              </h2>
              <p>
                La aplicación funciona hasta ahora, y cuando se realizan cambios en la lista PhoneNumbers, estos son también almacenados en la base de datos. Ahora solo necesitas añadir el comportamiento para que los datos guardados en la base de datos se carguen cuando se inicie la aplicación.
              </p>
              <p>
                Programa el controlador de evento <span class="ButtonText">Screen1.Initialize</span> para que la lista de números de teléfono guardada sea tomada de la base de datos y colocada en la lista <span class="ButtonText">PhoneNumbers</span> y la pantalla se actualice para mostrar la lista. Necesitarás comprobar los datos obtenidos para asegurarte de que hay alguno --  esto es porque la primera vez que se usa la aplicación, la base de datos no contiene ningún número.
              </p>
              <p>
                Necesitarás los siguientes bloques:
              </p>
              <div class="advtutorial">
                <table>
                  <tbody>
                    <tr>
                      <td class="tbl-header">
                        Tipo de bloque
                      </td>
                      <td class="tbl-header">
                        Cajón
                      </td>
                      <td class="tbl-header">
                        Propósito
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">def variable</span> ("valueFromDB")<br>
                      </td>
                      <td>                        
                        Definitions<br>
                      </td>
                      <td>
                        Una variable temporal para almacenar los datos recuperados<br>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">text (vacio)</span>
                      </td>
                      <td>                        
                        Text                      
                      </td>
                      <td>
                        El valor inicial de la variable puede ser cualquier cosa
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">Screen1.Initialize</span>
                      </td>
                      <td>                        
                        Screen1                      
                      </td>
                      <td>
                        Este es activado cuando se inicia la aplicación
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">set valueFromDB to</span>
                      </td>
                      <td>                        
                        My Definitions                      
                      </td>
                      <td>
                        cambiaras la variable al valor recuperado de la base de datos
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">TinyDB1.GetValue</span>
                      </td>
                      <td>                        
                        TinyDB1                      
                      </td>
                      <td>
                        toma la respuesta de texto almacenada en la base de datos
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">text</span> ("textGroup")                      
                      </td>
                      <td>                        
                        Text                      
                      </td>
                      <td>
                        colócalo en la ranura tag de <span class="ButtonText">GetValue</span>, asegúrate de que el texto es el mismo que se usó mas arriba en <span class="ButtonText">StoreValue</span>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">if test</span>
                      </td>
                      <td>                        
                        Control                      
                      </td>
                      <td>
                        para preguntar si el valor recuperado contiene algún texto
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">is list?</span>
                      </td>
                      <td>                        
                        Text                      
                      </td>
                      <td>
                        comprueba si el valor devuelto es una lista (si no hay datos devueltos, esto será falso)
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">global valueFromDB</span>
                      </td>
                      <td>                        
                        My Definitions                      
                      </td>
                      <td>
                        esta variable mantiene el valor devuelto desde <span class="ButtonText">GetValue</span>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">set PhoneNumbers to</span>
                      </td>
                      <td>                        
                        PhoneNumbers                      
                      </td>
                      <td>
                        si se nos devuelve algo, lo coloca en <span class="ButtonText">PhoneNumbers</span>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <span class="ButtonText">global valueFromDB</span>
                      </td>
                      <td>                        
                        My Definitions                      
                      </td>
                      <td>
                        esta variable mantiene el valor devuelto desde <span class="ButtonText">GetValue</span>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>
                Los bloques deben quedar así:
              </p>
              <div class="imagecontainer">
                <img alt="" height="288" src="TextGroup2Assets/screenInit.png" width="512">
              </div>
              <h2>
                Como trabajan los bloques
              </h2>
              <p>
                Cuando se inicia la aplicación, el evento <span class="ButtonText">Screen1.Initialize</span> es activado. El controlador de evento pregunta a la base de datos con <span class="ButtonText">GetValue</span> y la etiqueta (tag) "textGroup". Si hay algún valor con esta etiqueta en la base de datos, su valor correspondiente se colocará en la variable <span class="ButtonText">valueFromDB</span>. El controlador de evento comprueba si este valor -- ¿es una lista?-- y si es así coloca la lista en la variable <span class="ButtonText">PhoneNumbers</span> y llama a <span class="ButtonText">displayMembers</span>.<br>
              </p>
              <div class="advtutorial">
                <blockquote class="testing">
                  <strong>Prueba la aplicación.</strong> Para probar la aplicación final, primero empaquétala, instálala  en un teléfono y ejecútala. Probarla "en vivo" no funcionará en este caso, porque cada vez que "Reinicies la aplicación", borrará la base de datos: incluso si has almacenado los datos de forma persistente, serán borrados cuando reinicies la aplicación. Sal de la aplicación y vuelve a arrancarla para que se reinicie. ¿Aparece la lista de teléfonos que has introducido al recargar? Quita todos los elementos y prueba otra vez. ¿Se inicia la aplicación sin ningún error?
                </blockquote>
                <h2>
                  Text Group Parte II, Programa final
                </h2>
                <div class="imagecontainer">
                  <img alt="" height="695" src="TextGroup2Assets/textGroup2final.png" width="900">
                </div>
                <h2>
                  Variaciones
                </h2>
                <p>
                  UNa vez que tengas la aplicación Text Group trabajando, puede que quieras explorar algunas variaciones. Por ejemplo.
                </p>
                <ul>
                  <li>Escribe una versión que grabe ambos, el número de teléfono y el nombre de cada miembro del grupo. Puedes también usar ContactPicker para permitir al usuario elegir desde el nombre de un contacto en lugar de un número.
                  </li>
                  <li>Escribe una versión que permita a usuario definir y usar múltiples grupos. Necesitarás una lista en la que cada elemento sea una lista de contactos/números, y necesitarás una interfaz de usuario mas compleja.<br>
                  </li>
                </ul>
                <h2>
                  Revisión
                </h2>Estas son algunas de las ideas examinadas en este tutorial:<br>
                <ul>
                  <li>PhoneListPicker permite al usuario elegir de la lista de números de teléfono de sus contactos. La elección se coloca en la propiedad Selection y el evento AfterPicking es llamado cuando el usuario hace una elección.<br>
                  </li>
                  <li>ListPicker es similar a PhoneListPicker pero muestra una lista definida por el programador, por ejemplo, la lista de números de teléfono en el grupo. Tu defines la lista que aparecerá en ListPicker ajustando la propiedad Elements, y puedes hacer esto en el evento BeforePicking. La elección del usuario se coloca en en la propiedad Selection, y el evento AfterPicking  se inicia cuando el usuario hace una elección.
                  </li>
                  <li>TinyDB se usa para almacenar los datos de forma persistente y que puedan ser cargados cada vez que se inicie la aplicación. StoreValue almacena con una etiqueta (tag) para identificar al dato y el dato en si mismo (el valor). GetValue devuelve los datos de una etiqueta dada. A menudo, una aplicación llamará a GetValue cuando la aplicación se inicie (Screen1.Initialize) para cargar los datos persistentes.
                  </li>
                  <li>Actualmente, App Inventor no provee acceso y funcionalidad completos para los contactos y grupos en el teléfono. En este tutorial, has creado tu propio grupo y una aplicación para procesar el grupo (añadiendo, quitando y enviando mensajes a todos).<br>
                  </li>
                </ul>
                <h2>
                  Escanea la aplicación de ejemplo para tu teléfono
                </h2>
                <p>
                  Escanea el siguiente código Qr con tu teléfono para instalar y ejecutar la aplicación de ejemplo.
                </p>
                <div class="imagecontainer">
                  <img alt="" src="TextGroup2Assets/textgroup2barcode.png">
                </div>
                <h2>
                  Descarga el código fuente
                </h2>Si te ha gustado trabajar con este ejemplo en App Inventor, descarga el <a href="TextGroup2Assets/textgroup2.zip">código fuente</a> a tu computadora, despues abre App Inventor, ve a la página <span class="ButtonText">My Projects</span>, y elige <span class="ButtonText">More Actions | Upload Source</span>.
              </div>
              <blockquote class="notice">
                Google agradece al <a href="http://www.appinventor.org/">Profesor David Wolber</a>, Profesor de Ciencias de la Computación en la Universidad de San Francisco, el desarrollo de este tutorial.
              </blockquote>
            </div>
          </div>
        </div>
        <div class="footer">
          <div class="footer-legal">
            <p>
              <a href="http://creativecommons.org/licenses/by-nc/3.0/es/" rel="license"><img alt="Creative Commons License" class="c3" src="http://i.creativecommons.org/l/by-nc/3.0/88x31.png"></a><br>
              Este trabajo está bajo una licencia <a href="http://creativecommons.org/licenses/by-nc/3.0/es/" rel="license">Creative Commons Attribution-NonCommercial 3.0 Unported License</a>.
            </p>
            <p>
              El trabajo original de Google se ha modificado<br>
              El trabajo modificado se ha traducido del ingles al español<br>
              <a href="../../../about/index.html">Acerca de</a> | <a href="../../../about/privacy.html">Privacidad</a> | <a href="../../../about/termsofservice.html">Condiciones</a>
            </p>
          </div>
          <div class="footer-lastupdate">
            <script type="text/javascript">
if (document.lastModified != '') {
                var m = "Page last updated: " + document.lastModified;
                var p = m.length-8;
                document.writeln("<center>");
                document.write(m.substring(p, 0));
                document.writeln("<\/center>");
              }
            </script>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

